<template>
    <view-box>
        <div class="positioninformati">
            <p class="" align="center" >
                <span onclick="history.go(-1)" style="position: relative;left: -2.9rem;">
                    <i slot="icon" class="iconfont icon-zuobian"></i>
                </span>
                <span>资讯</span>
            </p>
        </div>
        <div class="background-informati">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1574311747,1762160439&fm=27&gp=0.jpg" alt="">
            <s-Search style="margin-top: .1rem;position: absolute;"></s-Search>
        </div>

        <div class="">
            <tab active-color="#e5191a" custom-bar-width="0">
                <tab-item selected @on-item-click="informations">首页</tab-item>
                <tab-item  @on-item-click="questionsinfors">问答</tab-item>
                <tab-item  @on-item-click="attentions">关注</tab-item>
            </tab>

            <div class="">
                <group-title class="group-title-col">今日资讯</group-title>
                <flexbox :gutter="0" class="flexbox-mation-cl" >
                    <flexbox-item :span="2/3">
                        <div class="flex-demo flexbox-col-title">
                            <p style="font-size:0.29166rem ">趁年轻，给自己拼一把的机会</p>
                            <p style="font-size:0.25rem;color: #666666">找工作时，才发现现在的就业市...</p>
                            <p style="font-size:0.20833rem;color: #999999; ">
                                <span>小智IT资讯</span>
                                <span>评论2</span>
                                <span>1天前</span>
                            </p>
                        </div>
                    </flexbox-item>
                    <flexbox-item :span="1/3">
                        <div class="flex-demo flexbox-infor-tu">
                            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3229678497,3911079503&fm=27&gp=0.jpg" alt="">
                        </div>
                    </flexbox-item>
                </flexbox>
              <p class="gd-flex-infor">更多</p>
            </div>

            <div class="">
                <group-title class="group-title-col">职业加油站</group-title>
                    <flexbox orient="vertical" class="flexbox-mation-cl1" :gutter="0">
                        <flexbox-item class="border-mation-cl">
                            <div class="flex-demo">
                                <p>不会“善终”的人没有未来</p>
                                <p><button>职业成长</button></p>
                            </div>
                        </flexbox-item>
                        <flexbox-item class="border-mation-cl">
                            <div class="flex-demo">
                                <p>不会“善终”的人没有未来</p>
                                <p><button>职业成长</button></p>
                            </div>
                        </flexbox-item>
                        <flexbox-item class="border-mation-cl">
                            <div class="flex-demo">
                                <p>不会“善终”的人没有未来</p>
                                <p><button>职业成长</button></p>
                            </div>
                        </flexbox-item>
                    </flexbox>
                <p class="gd-flex-infor">更多</p>
            </div>
            <div class="">
                <group-title class="group-title-col" style="border: 0;">微资讯</group-title>
                <scroller lock-y :scrollbar-x=false>
                    <div class="box1">
                        <div class="box1-item" v-for="(i, index) in 6" :key="index">
                            <div class="box-col-infor-action">
                                <p style="width: 30%">
                                    <img width="100%" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3229678497,3911079503&fm=27&gp=0.jpg" alt="">
                                </p>
                                <p style="width: 70%;">
                                    <span>贺州微就业</span>
                                    <span>1小时前</span>
                                </p>
                            </div>
                            <div class="box-col-infor-ziyan">
                                <p>就业资讯|《人力资源市
                                    场暂行条例》给求就业的
                                    你这些保障</p>
                                <p>
                                    <img width="100%" src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=9395690ff0039245beb5e70fb795a4a8/b8014a90f603738df92c93e0bf1bb051f919ec8a.jpg" alt=""></p>
                            </div>
                        </div>
                    </div>
                </scroller>
            </div>

            <div class="">
                <group-title class="group-title-col" style="border: 0;">大咖说</group-title>
                <scroller lock-y :scrollbar-x=false>
                    <div class="box1">
                        <div class="box1-item1" v-for="(i, index) in 6" :key="index">
                            <div class="box-col-infor-ziyan">
                                <p>
                                    <img width="100%" src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=9395690ff0039245beb5e70fb795a4a8/b8014a90f603738df92c93e0bf1bb051f919ec8a.jpg" alt=""></p>
                            </div>
                            <div class="master-col">
                                <p align="center">
                                    快手创始人宿华
                                </p>
                                <p align="center">快手7年一剑背后初心</p>
                                <p style="width: 70%;">
                                    <span><i slot="icon" class=""></i>30分钟</span>
                                    <span><i slot="icon" class=""></i>999+</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </scroller>
            </div>
        </div>

    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Divider, Tab, TabItem, GroupTitle, Scroller } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    Divider,
    Tab,
    TabItem,
    GroupTitle,
    Scroller
  },
  data () {
    return {
      scrollTop: 0
    }
  },
  methods: {
    informations () {
      this.$router.push({ path: '/information' })
    },
    questionsinfors () {
      this.$router.push({ path: '/questionsinfor' })
    },
    attentions () {
      this.$router.push({ path: '/attentionps' })
    }
  }
}
</script>
<style scoped>
    .background-informati{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 197px;
        margin-top: 79px;
        position: relative;
    }
    .background-informati img{
        width: 100%;
        height: 100%;
    }
    .positioninformati{
        width: 100%;
        height: 79px;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    .positioninformati p{
        width: 100%;
        height: 79px;
        line-height: 43.2px;
    }
    .positioninformati span{
        font-size:27px;
        color: #000;
    }
    .group-title-col{
        border-bottom: 1px solid #e5e5e5;
        height: 58px;
        line-height: 66px;
        background: #f8f8f8;
        margin-top: 0!important;
        color:#000 !important;
    }
    .flexbox-mation-cl{
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        height:110px !important;
    }
    .flexbox-col-title{
        width: 100%;
        margin-left: 40px;
    }
    .flexbox-col-title p{
        font-size:15px

    }
    .flexbox-infor-tu{
        width: 100%;
    }
    .flexbox-infor-tu img{
        width: 60%;
        margin-top: 13.68px;
    }
    .gd-flex-infor{
        background: #fff;
        height: 43.992px;
        font-size:14.45px;text-align: center;
        line-height: 43.992px;
        color:#e5191a;
        border-bottom:1px solid #e5e5e5;
    }
    .flexbox-mation-cl1{
        background: #fff;
        width: 100%;
    }
    .border-mation-cl{
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
        height: 88.99px;
    }
    .border-mation-cl p{
        font-size:20.99px;
        margin-left: 14.99px;
    }
    .border-mation-cl p button{
        width: 81.99px;
        height: 24.99px;
        font-size:14.99px;
        border: 1px solid #f8f8f8;
        background: #f8f8f8;
        margin-top: 14.4px;
    }

    .box1 {
        height: 100px;
        position: relative;
        width: 1490px;
    }
    .box1-item {
        width: 234px;
        height: 322.9px;
        background-color: #fff;
        display:inline-block;
        margin-left: 15px;
        float: left;
        border:1px solid #dddddd;
        text-align: center;
        line-height: 100px;
    }

    .box1-item1 {
        width: 179.49px;
        height: 278.49px;
        background-color: #fff;
        display:inline-block;
        margin-left: 15px;
        border: 1px solid #dddddd;
        border-radius: 7.2px;
        float: left;
        text-align: center;
        line-height: 100px;
    }
    .box-col-infor-action{
        width: 100%;
        display: flex;
        font-size:15px;

    }
    .box-col-infor-action p{
        line-height: 36px;
        text-align: left;
    }
    .box-col-infor-action p span{
        width: 100%;
        white-space: nowrap;
        display:inline-block;
    }
    .box-col-infor-ziyan{
        width: 100%;
        font-size:15px;
    }
    .box-col-infor-ziyan p{
        line-height: 43.2px;
        text-align: left;
    }
    .master-col{
        width: 100%;
        font-size:15px;
    }
    .master-col p{
        width: 100%;
        line-height: 43.2px;
        text-align: center;
    }
</style>